import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'
//import { routers } from '@/router/private/page.router'
const { Item, SubMenu } = Menu
export default {
  name: 'SMenu',
  props: {
    menu: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    mode: {
      type: String,
      required: false,
      default: 'inline',
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: [],
    }
  },
  computed: {
    rootSubmenuKeys: vm => {
      const keys = []
      vm.menu.forEach(item => keys.push(item.key))
      return keys
    },
  },
  mounted() {
    this.updateMenu()
  },
  watch: {
    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys.concat()
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    },
    $route: function() {
      // this.updateMenu()
    },
  },
  methods: {
    // select menu item
    onOpenChange(openKeys) {
      // 在水平模式下时执行，并且不再执行后续
      if (this.mode === 'horizontal') {
        this.openKeys = openKeys
        return
      }
      // 非水平模式时
      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    updateMenu() {
      const routes = this.$route.matched.concat()
      // console.log(routes)
      // 如果最后一项是路由里的子节点
      // if (routes[routes.length - 1].meta.type == 'child') {
      //   this.selectedKeys = [routes[routes.length - 2].meta.key]
      //   routes.pop()
      // } else {
      //   this.selectedKeys = [routes[routes.length - 1].meta.key]
      // }
      let openKeys = []
      if (this.mode === 'inline') {
        routes.shift()
        routes.pop()
        routes.forEach(item => {
          openKeys.push(item.meta.key)
        })
      }
      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
    },
    // render
    renderItem(menu) {
      // 当path为空且子菜单的长度为0时
      if (menu.path === '' && (!menu.childMenu || !menu.childMenu.length === 0)) {
        return null
      }
      // 当不存在子节点的时候
      else if (!menu.childMenu || menu.childMenu.length === 0) {
        return this.renderMenuItem(menu)
      }
      // 当存在子节点时
      else {
        return this.renderSubMenu(menu)
      }
      // if (!menu.hidden) {
      //   return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
      // }
      // return null
    },
    renderMenuItem(menu) {
      const target = null
      // const target = menu.meta.target || null
      const tag = (target && 'a') || 'router-link'
      // let filterArr = routers.filter(v => v.path === menu.path)
      let name
      // if (filterArr && filterArr.length > 0) {
      //   name = filterArr[0].name
      // }
      const props = { to: { name: name } }
      const attrs = { href: menu.path, key: menu.key }
      return (
        <Item {...{ key: menu.key }}>
          <tag {...{ props, attrs }}>
            {this.renderIcon(menu.icon)}
            <span>{menu.menuName}</span>
          </tag>
        </Item>
      )
    },
    // 渲染子菜单
    renderSubMenu(menu) {
      const itemArr = []
      menu.childMenu.forEach(item => itemArr.push(this.renderItem(item)))
      return (
        <SubMenu {...{ key: menu.key }}>
          <span slot="title">
            {this.renderIcon(menu.icon)}
            <span>{menu.menuName}</span>
          </span>
          {itemArr}
        </SubMenu>
      )
    },
    renderIcon(icon) {
      if (icon === 'none' || icon === undefined) {
        return null
      }
      const props = {}
      typeof icon === 'object' ? (props.component = icon) : (props.type = icon)
      return <Icon {...{ props }} />
    },
  },

  render() {
    const { mode, theme, menu } = this
    let openKeys = []
    this.openKeys.forEach(v => {
      v ? openKeys.push(v) : null
    })
    const props = {
      mode: mode,
      theme: theme,
      openKeys: openKeys,
    }
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys
        this.$emit('select', obj)
      },
      openChange: this.onOpenChange,
    }
    const menuTree = menu.map(item => {
      if (item.hidden) {
        return null
      }
      return this.renderItem(item)
    })
    return (
      // <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
      //   {menuTree}
      // </Menu>
      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
        {menuTree}
      </Menu>
    )
  },
}
